<template>
  <div id="app">
    <h2 class="titleTxt">GoBang</h2>
    <div class="wuziqi">
      <div class="wuziqi-wrap" :class="gameOver && 'click-banned'">
        <div class="wuziqi-row" v-for="(item, index) in list" :key="index">
          <div
            class="wuziqi-cell"
            v-for="(subItem, subIndex) in item"
            :key="'' + index + subIndex"
            :class="subItem !== '' && 'ban-style'"
            @click.stop="cellClickHander(index, subIndex)"
          >
            <template v-if="subItem !== ''">
              <span
                class="one-qi-zi"
                :style="{ backgroundColor: subItem === 1 ? 'white' : 'black' }"
              ></span>
            </template>
          </div>
        </div>
      </div>
      <!-- 底部区域 -->
      <div class="button">
        <div class="reset">
          <van-button type="warning" @click="Onload">重开</van-button>
        </div>
        <div class="buttonMsg" v-if="!gameOver">
          <span class="msgInner">当前落棋方</span>
          <span class="current-person">
            <span
              class="one-qi-zi"
              :style="{ backgroundColor: initQi === true ? 'white' : 'black' }"
            ></span>
          </span>
        </div>
        <div v-else class="buttonMsg">
          <span class="msgInner">获胜方</span>
          <div class="current-person">
            <span
              class="one-qi-zi"
              :style="{ backgroundColor: winner === 1 ? 'white' : 'black' }"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      // 棋子界面渲染数据
      // 10*11
      list: [
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", ""],
      ],
      initQi: true, //当前下棋方 true=白方 false=黑方
      gameOver: false, //游戏是否已结束
      winner: "", //赢家 1=白方， 0=黑言
    };
  },
  methods: {
    //格子点击事件，下棋
    cellClickHander(index, subIndex) {
      if (this.gameOver) {
        alert("本轮游戏已结束！");
        return;
      }
      if (this.list[index][subIndex] === "") {
        this.list[index][subIndex] = Number(this.initQi);
        this.checkHasWinner(index, subIndex); //判断输赢
        this.initQi = !this.initQi; //黑白棋切换
      }
    },
    // 判断是否有赢家
    checkHasWinner(oneLevelIndex, twoLevelIndex) {
      /*
        oneLevelIndex ---> Y轴，twoLevelIndex ----> X轴 
      */
      console.log(oneLevelIndex, twoLevelIndex);
      // 横向判断
      for (let index = 0; index < 8; index++) {
        const arr = [];
        for (let j = 0; j < 5; j++) {
          arr.push(this.list[oneLevelIndex][index + j]);
        }
        // console.log(arr)
        if (arr.every((i) => i === 1)) {
          this.WhiteWin();
          this.gameOver = true;
          this.winner = 1;
        }
        if (arr.every((i) => i === 0)) {
          this.BlackWin();
          this.gameOver = true;
          this.winner = 0;
        }
      }
      // 纵向判断
      const arrVertical = this.list.map((i) => i[twoLevelIndex]);
      for (let index = 0; index < 8; index++) {
        const arr = [];
        for (let j = 0; j < 5; j++) {
          arr.push(arrVertical[index + j]);
        }
        // console.log(arr)

        if (arr.every((i) => i === 1)) {
          this.WhiteWin();
          this.gameOver = true;
          this.winner = 1;
        }
        if (arr.every((i) => i === 0)) {
          this.BlackWin();
          this.gameOver = true;
          this.winner = 0;
        }
      }
      //斜向判断

      let newList = this.list;
      //console.log(newList);

      //白子左上方向判断
      let i1 = 0;
      while (
        oneLevelIndex - i1 >= 0 &&
        twoLevelIndex - i1 >= 0 &&
        newList[oneLevelIndex - i1][twoLevelIndex - i1] == "1"
      ) {
        i1++;
        console.log("i1: " + i1);
      }
      //白子右下方向判断
      let i2 = 0;
      while (
        oneLevelIndex + i2 <= 10 &&
        twoLevelIndex + i2 <= 10 &&
        newList[oneLevelIndex + i2][twoLevelIndex + i2] == "1"
      ) {
        i2++;
        console.log("i2: " + i2);
      }
      //白子右上方向判断
      let i3 = 0;
      while (
        oneLevelIndex - i3 >= 0 &&
        twoLevelIndex + i3 <= 10 &&
        newList[oneLevelIndex - i3][twoLevelIndex + i3] == "1"
      ) {
        i3++;
        console.log("i3: " + i3);
      }
      //白子左下方向判断
      let i4 = 0;
      while (
        oneLevelIndex + i4 <= 10 &&
        twoLevelIndex - i4 >= 0 &&
        newList[oneLevelIndex + i4][twoLevelIndex - i4] == "1"
      ) {
        i4++;
        console.log("i4: " + i4);
      }
      if (i1 == 5 || i2 == 5 || i3 == 5 || i4 == 5) {
        //白win
        this.WhiteWin();
      }

      //黑子左上方向判断
      let j1 = 0;
      while (
        oneLevelIndex - j1 >= 0 &&
        twoLevelIndex - j1 >= 0 &&
        newList[oneLevelIndex - j1][twoLevelIndex - j1] == "0"
      ) {
        j1++;
        // console.log("j1: " + j1);
      }

      //黑子右下方向判断
      let j2 = 0;
      while (
        oneLevelIndex + j2 <= 10 &&
        twoLevelIndex + j2 <= 10 &&
        newList[oneLevelIndex + j2][twoLevelIndex + j2] == "0"
      ) {
        j2++;
        //console.log("j2: " + j2);
      }
      //黑子右上方向判断
      let j3 = 0;
      while (
        oneLevelIndex - j3 >= 0 &&
        twoLevelIndex + j3 <= 10 &&
        newList[oneLevelIndex - j3][twoLevelIndex + j3] == "0"
      ) {
        j3++;
        console.log("j3: " + j3);
      }
      //黑子左下方向判断
      let j4 = 0;
      while (
        oneLevelIndex + j4 <= 10 &&
        twoLevelIndex - j4 >= 0 &&
        newList[oneLevelIndex + j4][twoLevelIndex - j4] == "0"
      ) {
        j4++;
        console.log("j4: " + j4);
      }
      if (j1 == 5 || j2 == 5 || j3 == 5 || j4 == 5) {
        //黑win
        this.BlackWin();
      }
    },
    Onload() {
      location.reload();
    },
    //白子胜利
    WhiteWin() {
      setTimeout(() => {
        Dialog.confirm({
          title: "提示",
          message: "白子胜利，是否开启新游戏",
          confirmButtonColor: "#07c160",
          cancelButtonColor: "#ff976a",
        })
          .then(() => {
            //刷新页面
            this.Onload();
          })
          .catch(() => {
            console.log("cancel");
          });
        this.gameOver = true;
        this.winner = 1;
      }, 200);
    },
    //黑子胜利
    BlackWin() {
      setTimeout(() => {
        //alert("黑子赢了");
        Dialog.confirm({
          title: "提示",
          message: "黑子胜利，是否开启新游戏",
          confirmButtonColor: "#07c160",
          cancelButtonColor: "#ff976a",
        })
          .then(() => {
            //刷新页面
            this.Onload();
          })
          .catch(() => {
            console.log("cancel");
          });
        this.gameOver = true;
        this.winner = 2;
      }, 200);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.titleTxt {
  background-color: lightgray;
  text-align: center;
  padding: 10px 0;
}
.wuziqi {
  width: 100%;
  height: 100%;
  // height: fit-content;
  background-color: lightgray;
  margin: 0 auto;
  // padding: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .wuziqi-wrap {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    &.click-banned {
      pointer-events: none;
    }
    .wuziqi-row {
      display: flex;
      .wuziqi-cell {
        width: 25px;
        height: 25px;
        border: 1px solid black;
        position: relative;
        margin-right: 4px;
        margin-bottom: 4px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        &:nth-child(-n + 8) {
          border: 1px solid black;
        }
        &::before {
          content: "";
          width: 100%;
          height: 1px;
          background-color: #b5b5b5;
          position: absolute;
          top: 50%;
          left: 0;
          z-index: -1;
        }
        &::after {
          content: "";
          width: 1px;
          height: 100%;
          background-color: #b5b5b5;
          position: absolute;
          left: 50%;
          top: 0;
          z-index: -1;
        }
        &.ban-style {
          cursor: not-allowed;
        }
      }
    }
  }

  .one-qi-zi {
    width: 55%;
    height: 55%;
    // border: 1px solid;
    display: inline-block;
    border-radius: 50%;
  }
  .current-person {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
  }
}
.button {
  margin-top: 15px;
  .reset {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
  }
}

.buttonMsg {
  display: flex;
  justify-content: center;
  .msgInner {
    padding-top: 3px;
  }
}
</style>

